import React, { useState, useEffect } from 'react';
import { useNavigate } from 'react-router-dom'; // 引入 useNavigate 用于页面重定向
import './Login.css'; // Importing Login-specific styles
import { login } from '../api/userApi';  // 导入 login 函数

const Login = ({ onLogin }) => {
    const [username, setUsername] = useState('');
    const [password, setPassword] = useState('');
    const [errorMessage, setErrorMessage] = useState('');
    const navigate = useNavigate();  // 页面重定向

    const handleSubmit = async (e) => {
        e.preventDefault();
        console.log('Logging in with:', { username, password });

        // 调用实际的 login 函数进行用户验证
        try {
            const result = await login(username, password); // 调用登录 API
            if (result.success) {
                const userId = result.data;
                // 登录成功，调用 onLogin 更新状态
                onLogin(userId);  
                // 存储 userId 到 localStorage
                localStorage.setItem('userId', userId);
                // 设置过期时间为 3 小时
                const expirationTime = Date.now() + 3 * 60 * 60 * 1000; // 3 小时后过期
                localStorage.setItem('expirationTime', expirationTime);
                // 登录成功后，重定向到主页
                navigate(`/home/${userId}`);
            } else {
                // 登录失败，显示错误信息
                setErrorMessage(result.error);  // 显示返回的错误信息
            }
        } catch (error) {
            // 捕获网络请求失败的错误
            setErrorMessage('登录失败，请稍后再试');
        }
    };

    const checkLoginStatus = () => {
        const userId = localStorage.getItem('userId');
        const expirationTime = localStorage.getItem('expirationTime');
    
        if (userId && expirationTime) {
            if (Date.now() < expirationTime) {
                // 仍然有效，用户可以继续使用
                return userId;
            } else {
                // 已过期，清除存储
                localStorage.removeItem('userId');
                localStorage.removeItem('expirationTime');
                return null;
            }
        }
        return null;
    };
    
    useEffect(() => {
        // 页面加载时检查登录状态
        const userId = checkLoginStatus();
        if (userId) {
          // 如果已登录，则更新全局状态，避免重新登录
          onLogin(userId);
        }
        // 不做自动重定向
      }, [onLogin]);

    // 跳转到注册页面
    const handleRegisterClick = () => {
        navigate('/register');
    };

    return (
        <div className="login">
            <div className="login-container">
                <div className="login-form">
                    <h2>Orbitly</h2>
                    {/* 表单 */}
                    <div className='login-form-container'>
                        <form onSubmit={handleSubmit}>
                            {/* 用户名 */}
                            <div className="form-group">
                                <label htmlFor="username" className="form-label">用户名</label>
                                <input 
                                    type="text" 
                                    id="username" 
                                    value={username} 
                                    onChange={(e) => setUsername(e.target.value)} 
                                    className="form-input" 
                                    placeholder="请输入用户名"
                                    required
                                />
                            </div>

                            {/* 密码 */}
                            <div className="form-group">
                                <label htmlFor="password" className="form-label">密码</label>
                                <input 
                                    type="password" 
                                    id="password" 
                                    value={password} 
                                    onChange={(e) => setPassword(e.target.value)} 
                                    className="form-input" 
                                    placeholder="请输入密码"
                                    required
                                />
                            </div>
                            
                            {/* 提交按钮 */}
                            <button type="submit" className="form-submit-btn" onClick={() => localStorage.setItem('isLoggedIn', 'true')}>登录</button>

                            {/* 错误信息 */}
                            {errorMessage && <p className="error-message">{errorMessage}</p>}

                            {/* 注册按钮 */}
                            <button type="button" class="register-btn" onClick={handleRegisterClick}>注册</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    );
};

export default Login;
